{% extends "forum/forum_home.html" %}
{% block page_link %}

{% endblock %}

{% block style %}
    <style>
        .add_class {
            background: #1E90FF;
        }

        .face {
            width: 440px;
            background: #fff;
            border: 1px solid #ddd;
            box-shadow: 0 0 12px #666;
            position: absolute;
            /*绝对定位*/
            top: 35px;
            right: 100px;
            display: none;
        }

        .face ul {
            width: 100%;
            height: 100%;
            display: flex;
            flex-wrap: wrap;
            padding: 8px;
            box-sizing: border-box;
        }

        .face ul li {
            width: 30px;
            height: 30px;
            list-style-type: none;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .input {
            width: 100%;
            border: none;
            padding-left: 5px;
            height: 40px;
            margin-top: 5px;
            background: none;
            outline: none;
        }

        .input:empty::before {
            color: lightgrey;
            content: attr(placeholder);
        }

        ul li {
            list-style: none;
        }

    </style>
{% endblock %}

{% block right_content %}
    <div style="height: 25px"></div>
    <div style="text-align: center; font-size: 36px">
        {{ obj.title }}
    </div>
    <div style="bottom: 0; height: 60px; width: 100%; background: #e8edf4; border-top: #b3b3b3; padding:10px 75px 10px 75px; text-align: right">
        <div style="margin-left:18px;width: auto;height: 30px;display: inline-block">
            <img id="look_but" src="../../static/forum/img/look.png" width="30px"
                 height="30px">
            <span id="new_comment" style="color: #707070">
                {{ obj.see_users.all.count }}
            </span>
        </div>
        <div style="margin-left:18px;width: auto;height: 30px;display: inline-block">
            <img style="cursor: pointer" id="like_but" onclick="count_number(this.id)"
                    {% if is_like == 'false' %} src="../../static/forum/img/未点赞.png"
                    {% else %}
                 src="../../static/forum/img/已点赞.png"
                    {% endif %}
                 width="30px" height="30px">
            <span id="new_like" style="color: #707070">{{ obj.like_users.all.count }}</span>
        </div>

        <div style="margin-left:18px;width: auto;height: 30px;display: inline-block">
            <a href="#comment_li">
                <img style="cursor: pointer" id="comment_but" src="../../static/forum/img/non_comment.png" width="30px"
                     height="30px">
            </a>&nbsp;&nbsp;
            <span id="new_comment" style="color: #707070">
                {{ obj.articlecomment_set.all.count }}
            </span>
        </div>
        <div style="margin-left:18px;width: auto;height: 30px;display: inline-block">
            <img style="cursor: pointer" id="collect_but" onclick="count_number(this.id)"
                    {% if is_collection == 'false' %}
                 src="../../static/forum/img/未收藏.png"
                    {% else %}
                 src="../../static/forum/img/已收藏.png"
                    {% endif %}
                 width="30px" height="30px">&nbsp;&nbsp;
            <span id="new_collect" style="color: #707070">{{ obj.collection_users.all.count }}</span>
        </div>
    </div>
    <div style="height: 25px"></div>
    <!--<div style="font-size: 20px;text-align: center">-->
    <!--    {{ obj.author }}-->
    <!--</div>-->
    <div style="padding: 0 75px 0 75px">
        {% autoescape off %}{{ obj.content_html }}{% endautoescape %}
    </div>
    <div style="height: 50px"></div>
    <div id="comment_li" style="margin-left: 75px; margin-bottom: 150px">

        <div style="margin-bottom: 20px">
            <button type="button" id="write_comment"
                    style="width: 100px;height: 30px;line-height: 30px;margin-top: 5px;background-color: #1E90FF;color: white;border: #1E90FF solid 1px;border-radius: 3px">
                写评论
            </button>

            <div id="input_kuang" style="margin-top: 15px; display: none">
                <div id="summernote" style="width: 80%; display: inline-block;vertical-align: top;"></div>
                <div style="text-align: right; width: 80%">
                    <button type="submit"
                            style="width: 100px;height: 30px;line-height: 30px;margin-top: 5px;background-color: #1E90FF;color: white;border: #1E90FF solid 1px;border-radius: 3px"
                            onclick="send_comment()">发 表
                    </button>
                </div>
            </div>
        </div>
        <ul style="width: 80%; padding:15px;color:#000; height: auto; background: white;border-radius: 15px">
            {% for comment_record in comment_records %}

                <li style="margin-bottom:15px;cursor: pointer; border-radius: 10px; padding-left: 10px"
                    onmousemove="on_this(this)" onmouseout="out_this(this)">
                    <div onclick="huifu({{ comment_record.parent.id }})" id="huifu_{{ comment_record.parent.id }}">
                        <div style="width: 100%;height: 30px;">
                            <div style="display: inline-block; margin-right: 25px;width: 100%;">
                                <p style="color: black;display: inline-block;vertical-align: top;font-weight: bold">{{ comment_record.parent.comment_user }}</p>
                                <p style="float: right;margin-right: 10px;">{{ comment_record.parent.create_time }}</p>
                                <p style="float: right;margin-right: 10px;">回复</p>
                            </div>
                        </div>
                        <div style="width: 100%;height: 30px;">
                            {% autoescape off %}{{ comment_record.parent.comment_text }}{% endautoescape %}
                        </div>
                        <span id="but_111" style="display:none ;float: right;margin-right: 15px"><button id="delete_but" type="button" style="background:rgba(0, 0, 0, 0);  color: #1E90FF; border: none;" onclick="delete_comment({{ comment_record.parent.id }})">删除</button></span>
                    </div>
                    <div id="other_comment_{{ comment_record.parent.id }}" class="other_comment"
                         style="display: none;background: #C0C0C0;width: 100%;margin-bottom: 5px;border-radius: 3px;background-color:  rgba(0, 0, 0, 0.03);">
                        <div id="respondent_{{ comment_record.parent.id }}" class="input"
                             placeholder="回复：{{ comment_record.parent.comment_user }}" contenteditable="true"></div>
                        <div style="width: 100%;height: 40px;position: relative;">
                            <button type="submit"
                                    onclick="send_comment({{ comment_record.parent.id }},{{ comment_record.parent.comment_user_id }})"
                                    style="float: right;margin-right: 20px;width: 70px;border-radius: 3px;background: #00a0e9;color: white;border: #00a0e9 solid 1px;margin-top: 5px;">
                                评 论
                            </button>
                            <div style="float: right;margin-right: 15px;" class="operator-box-btn">
                                <span class="face-icon"><img src="../../static/forum/jquerypinlun/images/bba_thumb.gif"
                                                             class='bq' style="margin-top: 7px;"></span>
                                <div class="face">
                                    <ul id="face_ul_{{ comment_record.parent.id }}">
                                        <li><img src="../../static/forum/jquerypinlun/images/smilea_thumb.gif"
                                                 title="[呵呵]"></li>
                                        <li><img src="../../static/forum/jquerypinlun/images/tootha_thumb.gif"
                                                 title="[嘻嘻]"></li>
                                        <li><img src="../../static/forum/jquerypinlun/images/laugh.gif" title="[哈哈]">
                                        </li>
                                        <li><img src="../../static/forum/jquerypinlun/images/tza_thumb.gif"
                                                 title="[可爱]"></li>
                                        <li><img src="../../static/forum/jquerypinlun/images/kl_thumb.gif" title="[可怜]">
                                        </li>
                                        <li><img src="../../static/forum/jquerypinlun/images/kbsa_thumb.gif"
                                                 title="[挖鼻屎]"></li>
                                        <li><img src="../../static/forum/jquerypinlun/images/cj_thumb.gif" title="[吃惊]">
                                        </li>
                                        <li><img src="../../static/forum/jquerypinlun/images/shamea_thumb.gif"
                                                 title="[害羞]"></li>
                                        <li><img src="../../static/forum/jquerypinlun/images/zy_thumb.gif" title="[挤眼]">
                                        </li>
                                        <li><img src="../../static/forum/jquerypinlun/images/bz_thumb.gif" title="[闭嘴]">
                                        </li>
                                        <li><img src="../../static/forum/jquerypinlun/images/bs2_thumb.gif"
                                                 title="[鄙视]"></li>
                                        <li><img src="../../static/forum/jquerypinlun/images/lovea_thumb.gif"
                                                 title="[爱你]"></li>
                                        <li><img src="../../static/forum/jquerypinlun/images/sada_thumb.gif"
                                                 title="[泪]"></li>
                                        <li><img src="../../static/forum/jquerypinlun/images/heia_thumb.gif"
                                                 title="[偷笑]"></li>
                                        <li><img src="../../static/forum/jquerypinlun/images/qq_thumb.gif" title="[亲亲]">
                                        </li>
                                        <li><img src="../../static/forum/jquerypinlun/images/sb_thumb.gif" title="[生病]">
                                        </li>
                                        <li><img src="../../static/forum/jquerypinlun/images/mb_thumb.gif"
                                                 title="[太开心]"></li>
                                        <li><img src="../../static/forum/jquerypinlun/images/ldln_thumb.gif"
                                                 title="[懒得理你]"></li>
                                        <li><img src="../../static/forum/jquerypinlun/images/yhh_thumb.gif"
                                                 title="[右哼哼]"></li>
                                        <li><img src="../../static/forum/jquerypinlun/images/zhh_thumb.gif"
                                                 title="[左哼哼]"></li>
                                        <li><img src="../../static/forum/jquerypinlun/images/x_thumb.gif" title="[嘘]">
                                        </li>
                                        <li><img src="../../static/forum/jquerypinlun/images/cry.gif" title="[衰]"></li>
                                        <li><img src="../../static/forum/jquerypinlun/images/wq_thumb.gif" title="[委屈]">
                                        </li>
                                        <li><img src="../../static/forum/jquerypinlun/images/t_thumb.gif" title="[吐]">
                                        </li>
                                        <li><img src="../../static/forum/jquerypinlun/images/k_thumb.gif" title="[打哈气]">
                                        </li>
                                        <li><img src="../../static/forum/jquerypinlun/images/bba_thumb.gif"
                                                 title="[抱抱]"></li>
                                        <li><img src="../../static/forum/jquerypinlun/images/angrya_thumb.gif"
                                                 title="[怒]"></li>
                                        <li><img src="../../static/forum/jquerypinlun/images/yw_thumb.gif" title="[疑问]">
                                        </li>
                                        <li><img src="../../static/forum/jquerypinlun/images/cza_thumb.gif"
                                                 title="[馋嘴]"></li>
                                        <li><img src="../../static/forum/jquerypinlun/images/88_thumb.gif" title="[拜拜]">
                                        </li>
                                        <li><img src="../../static/forum/jquerypinlun/images/sk_thumb.gif" title="[思考]">
                                        </li>
                                        <li><img src="../../static/forum/jquerypinlun/images/sweata_thumb.gif"
                                                 title="[汗]"></li>
                                        <li><img src="../../static/forum/jquerypinlun/images/sleepya_thumb.gif"
                                                 title="[困]"></li>
                                        <li><img src="../../static/forum/jquerypinlun/images/sleepa_thumb.gif"
                                                 title="[睡觉]"></li>
                                        <li><img src="../../static/forum/jquerypinlun/images/money_thumb.gif"
                                                 title="[钱]"></li>
                                        <li><img src="../../static/forum/jquerypinlun/images/sw_thumb.gif" title="[失望]">
                                        </li>
                                        <li><img src="../../static/forum/jquerypinlun/images/cool_thumb.gif"
                                                 title="[酷]"></li>
                                        <li><img src="../../static/forum/jquerypinlun/images/hsa_thumb.gif"
                                                 title="[花心]"></li>
                                        <li><img src="../../static/forum/jquerypinlun/images/hatea_thumb.gif"
                                                 title="[哼]"></li>
                                        <li><img src="../../static/forum/jquerypinlun/images/gza_thumb.gif"
                                                 title="[鼓掌]"></li>
                                        <li><img src="../../static/forum/jquerypinlun/images/dizzya_thumb.gif"
                                                 title="[晕]"></li>
                                        <li><img src="../../static/forum/jquerypinlun/images/bs_thumb.gif" title="[悲伤]">
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                {% for son_record in comment_record.son %}
                    <li style="margin-bottom:15px;cursor: pointer; border-radius: 10px; padding-left: 40px;"
                        onmousemove="on_this(this)" onmouseout="out_this(this)">
                        <div onclick="sonhuifu({{ son_record.id }})">
                            <div style="width: 100%;height: 30px;">
                                <div style="display: inline-block; margin-right: 25px;width: 100%;">
                                    <p style="color: black;display: inline-block;vertical-align: top;"><span
                                            style="font-weight: bold">{{ son_record.comment_user }}</span> 回复 <span
                                            style="font-weight: bold">{{ son_record.respondent }}</span></p>
                                    <p style="float: right;margin-right: 10px;">{{ son_record.create_time }}</p>
                                    <p style="float: right;margin-right: 10px;">回复</p>
                                </div>
                            </div>
                            <div style="width: 100%;height: 30px;">
                                {% autoescape off %}{{ son_record.comment_text }}{% endautoescape %}
                            </div>
                        </div>
                        <div id="son_other_comment_{{ son_record.id }}" class="other_comment"
                             style="display: none;background: #C0C0C0;width: 100%;margin-bottom: 5px;border-radius: 3px;background-color:  rgba(0, 0, 0, 0.03);">
                            <div id="son_respondent_{{ son_record.id }}" class="input"
                                 placeholder="回复：{{ son_record.comment_user }}" contenteditable="true"></div>
                            <div style="width: 100%;height: 40px;position: relative;">
                                <button type="submit"
                                        onclick="son_send_comment({{ son_record.parent_id }},{{ son_record.comment_user_id }}, {{ son_record.id }})"
                                        style="float: right;margin-right: 20px;width: 70px;border-radius: 3px;background: #00a0e9;color: white;border: #00a0e9 solid 1px;margin-top: 5px;">
                                    评 论
                                </button>
                                <div style="float: right;margin-right: 15px;" class="operator-box-btn">
                                    <span class="face-icon"><img
                                            src="../../static/forum/jquerypinlun/images/bba_thumb.gif" class='bq'
                                            style="margin-top: 7px;"></span>
                                    <div class="face">
                                        <ul id="son_face_ul_{{ son_record.id }}">
                                            <li><img src="../../static/forum/jquerypinlun/images/smilea_thumb.gif"
                                                     title="[呵呵]"></li>
                                            <li><img src="../../static/forum/jquerypinlun/images/tootha_thumb.gif"
                                                     title="[嘻嘻]"></li>
                                            <li><img src="../../static/forum/jquerypinlun/images/laugh.gif"
                                                     title="[哈哈]"></li>
                                            <li><img src="../../static/forum/jquerypinlun/images/tza_thumb.gif"
                                                     title="[可爱]"></li>
                                            <li><img src="../../static/forum/jquerypinlun/images/kl_thumb.gif"
                                                     title="[可怜]"></li>
                                            <li><img src="../../static/forum/jquerypinlun/images/kbsa_thumb.gif"
                                                     title="[挖鼻屎]"></li>
                                            <li><img src="../../static/forum/jquerypinlun/images/cj_thumb.gif"
                                                     title="[吃惊]"></li>
                                            <li><img src="../../static/forum/jquerypinlun/images/shamea_thumb.gif"
                                                     title="[害羞]"></li>
                                            <li><img src="../../static/forum/jquerypinlun/images/zy_thumb.gif"
                                                     title="[挤眼]"></li>
                                            <li><img src="../../static/forum/jquerypinlun/images/bz_thumb.gif"
                                                     title="[闭嘴]"></li>
                                            <li><img src="../../static/forum/jquerypinlun/images/bs2_thumb.gif"
                                                     title="[鄙视]"></li>
                                            <li><img src="../../static/forum/jquerypinlun/images/lovea_thumb.gif"
                                                     title="[爱你]"></li>
                                            <li><img src="../../static/forum/jquerypinlun/images/sada_thumb.gif"
                                                     title="[泪]"></li>
                                            <li><img src="../../static/forum/jquerypinlun/images/heia_thumb.gif"
                                                     title="[偷笑]"></li>
                                            <li><img src="../../static/forum/jquerypinlun/images/qq_thumb.gif"
                                                     title="[亲亲]"></li>
                                            <li><img src="../../static/forum/jquerypinlun/images/sb_thumb.gif"
                                                     title="[生病]"></li>
                                            <li><img src="../../static/forum/jquerypinlun/images/mb_thumb.gif"
                                                     title="[太开心]"></li>
                                            <li><img src="../../static/forum/jquerypinlun/images/ldln_thumb.gif"
                                                     title="[懒得理你]"></li>
                                            <li><img src="../../static/forum/jquerypinlun/images/yhh_thumb.gif"
                                                     title="[右哼哼]"></li>
                                            <li><img src="../../static/forum/jquerypinlun/images/zhh_thumb.gif"
                                                     title="[左哼哼]"></li>
                                            <li><img src="../../static/forum/jquerypinlun/images/x_thumb.gif"
                                                     title="[嘘]"></li>
                                            <li><img src="../../static/forum/jquerypinlun/images/cry.gif" title="[衰]">
                                            </li>
                                            <li><img src="../../static/forum/jquerypinlun/images/wq_thumb.gif"
                                                     title="[委屈]"></li>
                                            <li><img src="../../static/forum/jquerypinlun/images/t_thumb.gif"
                                                     title="[吐]"></li>
                                            <li><img src="../../static/forum/jquerypinlun/images/k_thumb.gif"
                                                     title="[打哈气]"></li>
                                            <li><img src="../../static/forum/jquerypinlun/images/bba_thumb.gif"
                                                     title="[抱抱]"></li>
                                            <li><img src="../../static/forum/jquerypinlun/images/angrya_thumb.gif"
                                                     title="[怒]"></li>
                                            <li><img src="../../static/forum/jquerypinlun/images/yw_thumb.gif"
                                                     title="[疑问]"></li>
                                            <li><img src="../../static/forum/jquerypinlun/images/cza_thumb.gif"
                                                     title="[馋嘴]"></li>
                                            <li><img src="../../static/forum/jquerypinlun/images/88_thumb.gif"
                                                     title="[拜拜]"></li>
                                            <li><img src="../../static/forum/jquerypinlun/images/sk_thumb.gif"
                                                     title="[思考]"></li>
                                            <li><img src="../../static/forum/jquerypinlun/images/sweata_thumb.gif"
                                                     title="[汗]"></li>
                                            <li><img src="../../static/forum/jquerypinlun/images/sleepya_thumb.gif"
                                                     title="[困]"></li>
                                            <li><img src="../../static/forum/jquerypinlun/images/sleepa_thumb.gif"
                                                     title="[睡觉]"></li>
                                            <li><img src="../../static/forum/jquerypinlun/images/money_thumb.gif"
                                                     title="[钱]"></li>
                                            <li><img src="../../static/forum/jquerypinlun/images/sw_thumb.gif"
                                                     title="[失望]"></li>
                                            <li><img src="../../static/forum/jquerypinlun/images/cool_thumb.gif"
                                                     title="[酷]"></li>
                                            <li><img src="../../static/forum/jquerypinlun/images/hsa_thumb.gif"
                                                     title="[花心]"></li>
                                            <li><img src="../../static/forum/jquerypinlun/images/hatea_thumb.gif"
                                                     title="[哼]"></li>
                                            <li><img src="../../static/forum/jquerypinlun/images/gza_thumb.gif"
                                                     title="[鼓掌]"></li>
                                            <li><img src="../../static/forum/jquerypinlun/images/dizzya_thumb.gif"
                                                     title="[晕]"></li>
                                            <li><img src="../../static/forum/jquerypinlun/images/bs_thumb.gif"
                                                     title="[悲伤]"></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                {% endfor %}
                <hr style="border: #cfcfcf dashed 1px;">
            {% endfor %}
        </ul>
    </div>
{#    <div id="toTop" style="position: fixed; right: 0; bottom: 10%; width: 50px; height: 50px; background: blue;">#}
{#        <img src="../../static/forum/img/return_top.png" width="50px" height="50px" alt="">#}
{#        返回顶部#}
{#    </div>#}
{% endblock %}

{% block script %}
<!--<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>-->
<script>
    window.onload = function () {
        document.getElementById("loading").style.display = "none";
        document.getElementById("forum").className = "add_class";
        document.getElementById("main_page").className = "add-nav-active";
    };
    const E = window.wangEditor;
    const editor = new E("#summernote");
    editor.config.uploadImgShowBase64 = 'true';
    editor.placeholder = "qin";
    editor.config.zIndex = 1;
    editor.create();

    var like_num = {{ obj.like_users.all.count | safe }}
    var comment_num = {{ obj.articlecomment_set.all.count | safe }}
    var collect_num = {{ obj.collection_users.all.count | safe }}
    var is_like = {{ is_like | safe }}       // true 显示高亮
    var is_collection = {{ is_collection | safe }}
    const id = {{ obj.id | safe }}

    function count_number(ele_id) {
        var xhr = new XMLHttpRequest();
        var local_host = window.location.host;          // 获取当前IP
        if (ele_id === 'like_but') {
                xhr.open('post', "/forum/forum_like_view", true);
                xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
                xhr.send('id=' + String(id));
                xhr.onreadystatechange = function () {
                    if (xhr.readyState === 4) {
                        if (xhr.status === 200) {
                            var JsonDate = JSON.parse(xhr.responseText);
                            console.log(JsonDate)
                            var res = JsonDate["message"];
                            {#alert(res)#}
                            if (res === '点赞成功') {
                                document.getElementById(ele_id).src = "../../static/forum/img/已点赞.png";
                                like_num += 1
                                document.getElementById('new_like').innerText = like_num
                                document.getElementById('new_like').style.color = '#e16531'
                            } else {
                                document.getElementById(ele_id).src = "../../static/forum/img/未点赞.png";
                                like_num -= 1
                                document.getElementById('new_like').innerText = like_num
                                document.getElementById('new_like').style.color = '#707070'
                            }
                        }
                    }
                }
            }
        else if (ele_id === 'collect_but') {
                xhr.open('post', "/forum/forum_collection_view", true);
                xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
                xhr.send('id=' + String(id));
                xhr.onreadystatechange = function () {
                    if (xhr.readyState === 4) {
                        if (xhr.status === 200) {
                            var JsonDate = JSON.parse(xhr.responseText);
                            console.log(JsonDate)
                            var res = JsonDate["message"];
                            if (res === '收藏成功') {
                                document.getElementById(ele_id).src = "../../static/forum/img/已收藏.png";
                                collect_num += 1
                                document.getElementById('new_collect').innerText = collect_num
                                document.getElementById('new_collect').style.color = '#e16531'
                            } else {
                                document.getElementById(ele_id).src = "../../static/forum/img/未收藏.png";
                                collect_num -= 1
                                document.getElementById('new_collect').innerText = collect_num
                                document.getElementById('new_collect').style.color = '#707070'
                            }
                        }
                    }
                }
        } else {
            document.getElementById('comment_but').setAttribute('href', '#comment_li')
        }
    }

    $(document).ready(function () {
        $('#write_comment').click(function (){
            $("#input_kuang").toggle('fast');
        })
    })

    function send_comment(parent_id=null, respondent=null) {
        {#alert(1)#}
        var xhr = new XMLHttpRequest();
        var local_host = window.location.host;
        if (!parent_id){
            var message_content = editor.txt.html().replaceAll("&", "%26");

            if (!message_content) {
                alert("请输入正确评论！")
                return false
            }
        }else {
            var message_content =  $('#respondent_'+String(parent_id)).html()
        }

        xhr.open('post', 'http://'+local_host+'/forum/forum_comment_view', true);
        xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
        var encode = encodeURI(message_content);
        // 对编码的字符串转化base64
        var base64 = btoa(encode);
        console.log("----: ", id, parent_id, respondent)
        xhr.send("article_id=" + String(id) + "&comment_text=" + base64 + "&parent_id=" + parent_id + "&respondent=" + respondent);
        xhr.onreadystatechange=function() {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    document.getElementById("loading").style.display='none';
                    var JsonDate = JSON.parse(xhr.responseText);
                    if (JsonDate["code"] === 200){
                        location.reload()
                        {#window.location.href="/forum/forum_details?id="+{{ obj.id }} + "#comment_li"#}}
                    else {
                        alert(JsonDate["message"])
                    }
                }
            }
        }
    }

    function son_send_comment(parent_id, respondent, son_id) {
        {#alert(1)#}
        var xhr = new XMLHttpRequest();
        var local_host = window.location.host;
        var message_content =  $('#son_respondent_'+String(son_id)).html()
        if (!message_content) {
            alert("请输入评论内容！")
            return false
        }
        xhr.open('post', 'http://'+local_host+'/forum/forum_comment_view', true);
        xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
        var encode = encodeURI(message_content);
        // 对编码的字符串转化base64
        var base64 = btoa(encode);
        {#console.log("----: ", id, parent_id, respondent)#}
        xhr.send("article_id=" + String(id) + "&comment_text=" + base64 + "&parent_id=" + parent_id + "&respondent=" + respondent);
        xhr.onreadystatechange=function() {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    document.getElementById("loading").style.display='none';
                    var JsonDate = JSON.parse(xhr.responseText);
                    if (JsonDate["code"] === 200){
                        location.reload()
                    }
                    else {
                        alert(JsonDate["message"])
                    }
                }
            }
        }
    }

    function huifu(id){
        {#$(document).ready(function (){#}
        {#    $('#'+id).click(function (){#}
        {#        $("#but_111").toggle()#}
        {#    })#}
        {#"})"#}
        if ($('#other_comment_'+String(id)).css('display') === 'inline-block' ){
            $('#other_comment_'+String(id)).css('display', 'none')
        }else{
            $('#other_comment_'+String(id)).css('display', 'inline-block')
        }
        var face_ul = document.getElementById("face_ul_"+ String(id)).childNodes;
        for (var i=0; i<face_ul.length; i++){
            face_ul[i].className='respondent_'+String(id);
        }
        var comment_lis = document.getElementsByClassName("other_comment")
        for (var k=0; k<comment_lis.length; k++) {
            var comment_li = comment_lis[k]
            if (comment_li.id !== "other_comment_" + String(id)){
                comment_li.style.display = 'none'
            }
        }
    }

    function sonhuifu(id){
        if ($('#son_other_comment_'+String(id)).css('display') === 'inline-block' ){
            $('#son_other_comment_'+String(id)).css('display', 'none')
        }else{
            $('#son_other_comment_'+String(id)).css('display', 'inline-block')
        }
        var face_ul = document.getElementById("son_face_ul_"+String(id)).childNodes;
        for (var i=0; i<face_ul.length; i++){
            face_ul[i].className='son_respondent_'+String(id);
        }
        var comment_lis = document.getElementsByClassName("other_comment")
        for (var k=0; k<comment_lis.length; k++) {
            var comment_li = comment_lis[k]
            if (comment_li.id !== "son_other_comment_" + String(id)){
                comment_li.style.display = 'none'
            }
        }
    }


    //点击小图片，显示表情
    $(".bq").click(function (e) {
        $(".face").slideToggle(); //慢慢向下展开
        e.stopPropagation(); //阻止冒泡事件
    });

    //点击小图标时，添加功能
    $(".face ul li").click(function () {
        var img_src = this.childNodes[0].src;
        var img_title = this.childNodes[0].title;
        var mess_id = this.className;
        var img_tag = document.createElement("img");
        img_tag.src=img_src;img_tag.title=img_title;
        document.getElementById(mess_id).append(img_tag); //将表情添加到输入框
    });

    function on_this(this_is) {
        this_is.style.background='#f3f3f3'
    }

    function out_this(this_is) {
        this_is.style.background='white'
    }

    function delete_comment(comment_id) {

    }

    {#$(window).scroll(function () {#}
    {#    var scrolltop = $(window).scrollTop();#}
    {#    console.log(scrolltop)#}
    // 垂直滚动值大于500时，显示回到顶部，否则隐藏
    {#    if (scrolltop >= 500) {#}
    {#        $('#toTop').show();#}
    {#    }else {#}
    {#        $('#toTop').hide();#}
    {#    }#}
    {#"});"#}

    // 点击回到顶部,将html或body的scrollTop属性值设为0
    {#$("#toTop").click(function() {#}
    {#    $("html,body").stop().animate({#}
    {#        "scrollTop": "0px"#}
    {#    });#}
    {#"});"#}
</script>

{% endblock %}